<!-- 供应商编辑弹窗 -->
<template>
  <div class="ele-body">
    <a-card :title="supplierModalApp.title" :bordered="false">
      <a-form
        ref="form2"
        :model="supplierModalApp.supplier"
        :rules="supplierModalApp.rules"
        :label-col="{md: {span: 7}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
        <a-row :gutter="16">
          <a-col :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item label="姓名:" name="name">
              <a-input
                :disabled="!supplierModalApp.display"
                v-model:value="supplierModalApp.supplier.name"
                placeholder="请输入供应商名称"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item label="联系电话:" name="contactTel">
              <a-input
                :disabled="!supplierModalApp.display"
                v-model:value="supplierModalApp.supplier.contactTel"
                placeholder="请输入联系电话"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item label="电子邮箱:" name="email">
              <a-input
                :disabled="!supplierModalApp.display"
                v-model:value="supplierModalApp.supplier.email"
                placeholder="请输入电子邮箱"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item label="联系地址:" name="contactAddressName">
              <a-input
                :disabled="!supplierModalApp.display"
                v-model:value="supplierModalApp.supplier.contactAddressName"
                placeholder="请输入联系地址"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="16" :md="12" :sm="24" :xs="24">
            <a-form-item label="备注:" name="remark"
                         :label-col="{md: {span: 3}, sm: {span: 20}}"
                         :wrapper-col="{md: {span: 21}, sm: {span: 20}}">
              <a-input
                :disabled="!supplierModalApp.display"
                v-model:value="supplierModalApp.supplier.remark"
                placeholder="请输入备注"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

        </a-row>

        <MSupplyMaterialMannage
          style="margin: 10px 0"
          :is-detail="!supplierModalApp.display"
          height="350"
          ref="supplyMaterialForm"
          :supplierId="editId"></MSupplyMaterialMannage>

        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
            <!--class="ele-pull-right"-->
              <teleport to="#supplierEditModalFooter">
                <div>
                  <a-space size="middle">
                    <a-button @click="supplierListApp.modalShowing=false">取消
                    </a-button>
                    <a-button
                      v-if="supplierModalApp.display"
                      type="primary"
                      @click="onSubmit(supplierModalApp.supplier)"
                      :loading="loading">提交
                    </a-button>
                  </a-space>
                </div>
              </teleport>
          </a-form-item>
        </a-col>

      </a-form>
    </a-card>

  </div>

</template>

<script>
import {defineComponent, inject, reactive, onMounted, toRefs, ref} from 'vue'
import {useRoute} from "vue-router"
import {SupplierService} from "@/views/restaurant/material/supplier/supplierService";
import {VXETable} from 'vxe-table'
import regions from 'ele-admin-pro/packages/regions.js';
import MSupplyMaterialMannage from '@/components/MSupplyMaterial/MSupplyMaterialMannage/index'
import validate from 'ele-admin-pro/packages/validate';

export default defineComponent({
  components: {
    MSupplyMaterialMannage,
  },
  props: {
    supplierId: String
  },
  setup(props) {
    const editId = toRefs(props).supplierId.value
    console.log(editId)
    // 省市区数据
    const form2 = ref({})
    const cityData = regions
    const route = useRoute();
    let routeId = route.params.id;
    let supplierListApp = inject('supplierListApp', reactive({}));
    let supplierGrid = inject('supplierGrid', reactive({}));
    let gridOptions = inject('gridOptions', reactive({}));
    let supplyMaterialForm = ref({});
    const supplierModalApp = reactive({
      id: null,
      supplier: {},
      isEdit: false,
      display: false
    });
    supplierModalApp.rules = {
      name: [
        {
          required: true,
          type: 'string',
          message: '请输入供应商姓名',
          trigger: 'blur'
        }
      ],
      contactTel: [
        {
          required: true,
          type: 'string',
          message: '请输入联系电话',
          trigger: 'blur'
        },
        {
          pattern: validate.phoneStrong,
          type: 'string',
          message: '请输入正确的联系电话',
          trigger: 'blur'
        }
      ],
      email: [
        {
          pattern: validate.email,
          type: 'string',
          message: '请输入正确的电子邮箱',
          trigger: 'blur'
        }
      ],
      contactAddressName: [
        {
          required: false,
          type: 'string',
          message: '请输入联系地址',
          trigger: 'blur'
        }
      ],
      contactAddressId: [
        {
          required: false,
          type: 'number',
          message: '请输入联系地址',
          trigger: 'blur'
        }
      ],
      purchaser: [
        {
          required: false,
          type: 'number',
          message: '请输入采购员',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      supplierModalApp.supplier = reactive({});
      if (routeId) {//路由
        supplierModalApp.id = routeId;
        supplierModalApp.display = false;
        findSupplier(supplierModalApp.id);
      } else if (supplierListApp.editModalForEdit) {//修改弹窗
        supplierModalApp.id = supplierListApp.currentId;
        supplierModalApp.display = true;
      } else if (!supplierListApp.editModalForEdit && supplierListApp.addModalForEdit) {//新增弹窗
        supplierModalApp.display = true;
      } else if(!supplierListApp.editModalForEdit && !supplierListApp.addModalForEdit && supplierListApp.showModalForEdit){
        supplierModalApp.id = supplierListApp.currentId;
        supplierModalApp.display = false;
      }
      if (supplierModalApp.id) findSupplier(supplierModalApp.id);
    })

    const findSupplier = (id) => {
      SupplierService.findSupplierForView(id).then((res) => {
        supplierModalApp.supplier = res.data;
        //TODO:为编辑准备.
        // supplierModalApp.title = "编辑学生 " + supplierModalApp.supplier.name;
      }).catch(error => {
        VXETable.modal.message({content: `查找学生出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
        form2.value.validate().then(()=> {
          let getSupplyMaterialList =supplyMaterialForm.value.getSupplyMaterialList()

          //当为数组时用逗号连接
          getSupplyMaterialList.then((supplyMaterialList)=>{
            data.supplyMaterialList = supplyMaterialList
            console.log(data.supplyMaterialList)
            if (data.eid) {
              //修改
              SupplierService.updateSupplier(data).then((res) => {
                console.log(res);
                VXETable.modal.message({content: '操作成功', status: 'success'});
                setTimeout(onBack, 3000);
              }).catch(error => {
                VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
              })
            } else {
              //新增
              SupplierService.saveSupplier(data).then((res) => {
                console.log(res);
                VXETable.modal.message({content: '操作成功', status: 'success'});
                setTimeout(onBack, 3000);
              }).catch(error => {
                VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
              })
            }
          })
        })


    }

    /*TODO:返回列表*/
    const onBack = () => {
      setTimeout(() => {
        supplierGrid.value.commitProxy("query");
      }, 1500);
      supplierListApp.modalShowing = false;
    }
    return {
      editId,
      cityData,
      routeId,
      form2,
      // store,
      supplierGrid,
      gridOptions,
      supplyMaterialForm,
      supplierListApp,
      supplierModalApp,
      onSubmit,
      onBack,
    }

  },
})
</script>

<style scoped>

</style>
